<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>if01</title>
    <link rel="stylesheet" href="./css/index.min.css">
    <link rel="shortcut icon" href="./favicon.png">
</head>

<body>
    <header>
        <h1>Hello World!</h1>
        <p>China is speeding up strategic plan, standards, traffic rules, laws and regulations on accident-incurred
            liabilities for its smart car industry, Economic Information Daily reported Thursday.</p>
        <div class="sign">
            <h5>Create Your Account</h5>
            <p>It is absolutely free</p>
            <form>
                <input type="text" placeholder="denis@getcraftwork.com">
                <input type="text" placeholder="Create your password">
                <input type="button" value="Sign Up">
            </form>
        </div>
    </header>
    <main>
        <div class="introduce">
            <div class="container">
                <p>Boatloads of Awesome</p>
                <h2>Ready-made, customizable, HTML landing page sections</h2>
                <div class="items">
                    <div class="item">
                        <img src="./images/Iphone-Icon.png" alt="Phone">
                        <h5>Mobile First</h5>
                        <p>All modulz are built mobile-first for maximum device compatibility.</p>
                    </div>
                    <div class="item">
                        <img src="./images/Check-Icon.png" alt="Check">
                        <h5>Accessibility</h5>
                        <p>Support for IE8, mobile and tablet devices, screenreaders and color blind.</p>
                    </div>
                    <div class="item">
                        <img src="./images/Pencil-Icon.png" alt="Pencil" width="42">
                        <h5>Fluid Typography</h5>
                        <p>On different screen sizes, fonts automagically scale with the viewport.</p>
                    </div>
                    <div class="item">
                        <img src="./images/Settings-Icon.png" alt="Settings" width="42">
                        <h5>Customization</h5>
                        <p>Make any design your own using the Style Editor. Personalize fonts,colors,and layouts to
                            create
                            the custom look you want</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="smartcar">
            <div class="container">
                <div class="left">
                    <h2>Supportive policies for China's smart car</h2>
                    <p>China will come up with its own smart car standards,traffic rules,laws and regulations relating
                        to safety,accroding to the China Industry Innovation Alliance for the Intelli-gent and Connected
                        Vehicles.</p>
                    <div>
                        <input class="check" type="button" value="Check out Features">
                        <input class="try" type="button" value="Try product for Free">
                    </div>
                </div>
            </div>
            <div class="screen">
                <img src="./images/IPad.png" alt="IPad" width="480">
                <img src="./images/Screen.png" alt="Screen" height="400">
            </div>
        </div>
        <div class="products">
            <div class="container">
                <h2>Try Our Awesome Products</h2>
                <div class="items">
                    <div class="item">
                        <img src="./images/Singleton.png" alt="Singleton">
                        <p>Li Jun, a China Academy of Engineering academician and also director of the alliance's
                            experts' committee, said that China will also launch design guidance for smart cars, smart
                            map architecture and standards for test grounds.</p>
                    </div>
                    <div class="item">
                        <img src="./images/Hero.png" alt="Hero">
                        <p>Li said the smart car industry is able to enlarge the current car industry by 1 trillion yuan
                            ($158.15 billion) and also able to boost fast development in 5G, internet of cars, big data,
                            artificial intelligence and new-energy vehicles.</p>
                    </div>
                    <div class="item">
                        <img src="./images/Portland.png" alt="Portland">
                        <p>Zhang Junyi, a partner with NIO Capital, said that the smart car is the trend for the car
                            industry and China's auto sector will usher in a new key development stage with the
                            improvement of infrastructure, technology, policies and laws.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="cases">
            <div class="container">
                <div class="first">
                    <img src="./images/feature1.png" alt="feature1" width="500" height="">
                    <div>
                        <h5>Learn How to Improve Your Personal Business</h5>
                        <p>Li Jun, a China Academy of Engineering academician and also director of the alliance's
                            experts' committee, said that China will also launch design guidance for smart cars, smart
                            map architecture and standards for test grounds.</p>
                    </div>
                </div>
                <div class="second">
                    <img src="./images/featrue2.png" alt="featrue2" width="500" height="">
                    <div>
                        <h5>Choose Between Two Beautifully Designed Color Schemes.</h5>
                        <p>China will come up with its own smart car standards, traffic rules, laws and regulations
                            relating to safety, according to the China Industry Innovation Alliance for the Intelligent
                            and Connected Vehicles.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="crew">
            <div class="container">
                <h2>Our Awesome Crew</h2>
                <p>Our unique online teaching style makes learning easy for everyone. Whether you are trying to land a
                    new job, brush up on your skills.</p>
                <div class="items">
                    <div class="item">
                        <img src="./images/zsyd.png" alt="user1">
                        <div class="info active">
                            <h5>Ethan Dutton</h5>
                            <p>Senior Visual Designer</p>
                            <div>
                                <a href="http://www.baidu.com"><img src="./images/Facebook-Icon.png"
                                        alt="Facebook-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Twitter-Icon.png"
                                        alt="Twitter-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Instagram-Icon.png"
                                        alt="Instagram-Icon"></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/user2.png" alt="user2">
                        <div class="info">
                            <h5>Ethan Dutton</h5>
                            <p>Senior Visual Designer</p>
                            <div>
                                <a href="http://www.baidu.com"><img src="./images/Facebook-Icon.png"
                                        alt="Facebook-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Twitter-Icon.png"
                                        alt="Twitter-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Instagram-Icon.png"
                                        alt="Instagram-Icon"></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/user3.png" alt="user3">
                        <div class="info">
                            <h5>Ethan Dutton</h5>
                            <p>Senior Visual Designer</p>
                            <div>
                                <a href="http://www.baidu.com"><img src="./images/Facebook-Icon.png"
                                        alt="Facebook-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Twitter-Icon.png"
                                        alt="Twitter-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Instagram-Icon.png"
                                        alt="Instagram-Icon"></a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./images/user4.png" alt="user4">
                        <div class="info">
                            <h5>Ethan Dutton</h5>
                            <p>Senior Visual Designer</p>
                            <div>
                                <a href="http://www.baidu.com"><img src="./images/Facebook-Icon.png"
                                        alt="Facebook-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Twitter-Icon.png"
                                        alt="Twitter-Icon"></a>
                                <a href="http://www.baidu.com"><img src="./images/Instagram-Icon.png"
                                        alt="Instagram-Icon"></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact">
            <div class="container">
                <div class="send">
                    <h5>Fell free to Write Us</h5>
                    <input type="text" placeholder="E-mail">
                    <input type="text" placeholder="Subject">
                    <input type="text" placeholder="Message">
                    <input type="button" value="SEND">
                </div>
                <div class="info">
                    <h2>Contacts</h2>
                    <p>Make any design your own using the Style Editor. Personalize fonts, colors, and layouts to create
                        the custom look you want.</p>
                    <div class="address">
                        <div class="item">
                            <img src="./images/Map-Icon.png" alt="Map-Icon">
                            <p>360 King Street<br>
                                Feastrvale Trevose, PA 19057</p>
                        </div>
                        <div class="item">
                            <img src="./images/Phone-Icon.png" alt="Phone-Icon">
                            <p>(755) 564-84-12</p>
                        </div>
                        <div class="item">
                            <img src="./images/Mail-Icon.png" alt="Mail-Icon">
                            <p>youname@mail.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="container">
            <dl>
                <dt>Learn More</dt>
                <dd><a href="#">How it works?</a> </dd>
                <dd><a href="#">Meeting tools</a> </dd>
                <dd><a href="#">Live streaming</a> </dd>
                <dd><a href="#">Contact method</a> </dd>
            </dl>
            <dl>
                <dt>About Us</dt>
                <dd><a href="#">About us</a> </dd>
                <dd><a href="#">Features</a> </dd>
                <dd><a href="#">Privacy police</a> </dd>
                <dd><a href="#">Terms & Conditions</a> </dd>
            </dl>
            <dl>
                <dt>Support</dt>
                <dd><a href="#">F.A.Q.</a> </dd>
                <dd><a href="#">Contact us</a> </dd>
                <dd><a href="#">Live chat</a> </dd>
                <dd><a href="#">Phone call</a> </dd>
            </dl>
            <div>
                <h5>Enjoy your Life</h5>
                <p>Great web UI kit for designers, freelancers or business.</p>
                <div class="icon">
                    <a href="javascript:0;">
                        <img src="./images/Footer_Twitter-Icon.png" alt="">
                    </a>
                    <a href="javascript:0;">
                        <img src="./images/Footer_Facebook-Icon.png" alt="">
                    </a>
                    <a href="javascript:0;">
                        <img src="./images/Footer_Google-Icon.png" alt="">
                    </a>
                    <a href="javascript:0;">
                        <img src="./images/Footer_Tumbler-Icon.png" alt="">
                    </a>
                    <a href="javascript:0;">
                        <img src="./images/Footer_Pinterest-Icon.png" alt="">
                    </a>
                    <a href="javascript:0;">
                        <img src="./images/Footer_LinkedIn-Icon.png" alt="">
                    </a>
                </div>
            </div>
        </div>
    </footer>
</body>

</html>